<template>
  <view>
    <!-- <view class="uni-padding-wrap" style="margin-top:30upx;">
      <button @click="showRightDrawer" style="margin-bottom:20upx;">显示日历组件</button>
    </view>-->
    <uni-drawer :visible="rightDrawerVisible" mode="left" @close="closeRightDrawer">
      <view class="choose-data">
        <view class="choose-data-box">
          <view class="choose-data-title">
            <view class="choose-data-title-item cancel" @click="closeRightDrawer">取 消</view>
            <view class="gregorian-type">
              <view
                :class="['gregorian-item',init.gregorian==1?'gregorian-item-active':'']"
                @click="init.gregorian==2?changeGre($event):''"
                :data-tag="1"
              >公</view>
              <view
                :class="['gregorian-item',init.gregorian==2?'gregorian-item-active':'']"
                @click="init.gregorian==1?changeGre($event):''"
                :data-tag="2"
              >农</view>
            </view>
            <view class="choose-data-title-item confirm" @click="birthConfirm">确 定</view>
          </view>
          <view class="choose-data-main">
            <picker-view
              style="width: 90%; height: 350rpx;"
              :value="birthValue"
              @change="bindChange"
            >
              <picker-view-column>
                <view
                  v-for="(item,index) in birthPickerDate.years"
                  :key="index"
                  style="line-height: 34px;"
                >{{item}}年</view>
              </picker-view-column>
              <picker-view-column>
                <view
                  v-for="(item,index) in birthPickerDate.months"
                  :key="index"
                  style="line-height: 34px"
                >{{item}}月</view>
              </picker-view-column>
              <picker-view-column>
                <view
                  v-for="(item,index) in birthPickerDate.days"
                  :key="index"
                  style="line-height: 34px"
                >{{gregorian==1?item+'日':item}}</view>
              </picker-view-column>
            </picker-view>
          </view>
        </view>
      </view>
    </uni-drawer>
  </view>
</template>
<script>
import uniDrawer from "../../components/uni-drawer/uni-drawer";
import {
  initCalendar,
  bindBirthChange,
  birthConfirm,
  changeGregorian
} from "@/common/utils/birth.js";
let app = getApp();
export default {
  props: ["init"],
  components: {
    uniDrawer
  },
  data() {
    return {
      rightDrawerVisible: false,
      birthPickerDate: {},
      birthValue: []
    };
  },
  created() {
    initCalendar(this, this.init.gregorian, this.init.initBirthday);
    console.log(this.init);
    this.gregorian = this.init.gregorian;
    setTimeout(() => {
      this.visible = true;
    }, 0);
  },
  methods: {
    closeRightDrawer() {
      this.rightDrawerVisible = false;
    },
    showRightDrawer() {
      this.rightDrawerVisible = true;
      this.gregorian = this.init.gregorian;
      this.init.initBirthday =
        this.init.birthday == "" ? "19900101" : this.init.birthday;
      initCalendar(this, this.init.gregorian, this.init.initBirthday);
    },
    bindChange(e) {
      bindBirthChange(e, this);
    },
    birthConfirm(e) {
      birthConfirm(e, this);
      console.log(e);
      this.$emit("birthConfirm", this.birthdayData);
      this.closeRightDrawer();
    },
    changeGre(e) {
      this.init.gregorian = e.currentTarget.dataset.tag;
      this.gregorian = e.currentTarget.dataset.tag;
      changeGregorian(e, this);
    }
  }
};
</script>

<style>
.choose-data {
  background: #fff;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.choose-data-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90rpx;
  border-bottom: 1rpx solid #efefef;
}

.choose-data-title .choose-data-title-item {
  height: 90rpx;
  width: 150rpx;
  text-align: center;
  line-height: 90rpx;
  font-size: 32rpx;
}

.choose-data-title .birth-type {
  height: 90rpx;
  line-height: 90rpx;
}

.choose-data-title .gregorian-type .gregorian-item {
  display: inline-block;
  width: 46rpx;
  height: 46rpx;
  line-height: 46rpx;
  font-size: 24rpx;
  color: #5d656b;
  text-align: center;
  border: 1rpx solid #d4d7da;
  border-radius: 5rpx;
  margin-left: 30rpx;
}

.choose-data-title .gregorian-type .gregorian-item:first-child {
  margin-left: 0;
}

.choose-data-title .gregorian-type .gregorian-item.gregorian-item-active {
  background: #fc5459;
  color: #fff;
  border-color: #fc5459;
}
.cancel{
    border: none;
}
.confirm {
  color: #46bd45;
}

.choose-data-main {
  height: 400rpx;
  line-height: 400rpx;
}

picker-view {
  margin: 30rpx auto;
  text-align: center;
}

.mask {
  position: absolute;
  top: 0;
  z-index: 100;
  background: #000;
  opacity: 0.3;
  width: 100%;
  height: 100%;
}

.region {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 500rpx;
}

.birth {
  color: #ccc;
}
</style>
